<template>
  <div
    v-if="!initializing"
    class="vc-component"
    :style="visual.parseStyle(currNode.currStyle)"
  >
    <div
      class="vc-portal-menu"
      :style="style"
    >
      <el-menu
        ellipsis
        mode="horizontal"
        :default-active="active"
        :popper-offset="0"
        @select="selectMenuItem"
        popper-class="vc-menu-popper"
      >
        <span v-for="(first, index) in dataList" :key="index">
          <el-sub-menu
            v-if="first.children && first.children.length > 0"
            :index="first.id"
            :key="first.id"
            :style="currStyle"
            class="first-menu"
          >
            <template #title>
              <div :style="currStyle">{{first.text}}</div>
            </template>
            <span v-for="(second, index2) in first.children" :key="index2">
              <el-sub-menu
                v-if="second.children && second.children.length > 0"
                :index="second.id"
                :key="second.id"
              >
                <template #title>{{second.text}}</template>
                <span v-for="(third, index3) in second.children" :key="index3">
                  <el-sub-menu
                    v-if="third.children && third.children.length > 0"
                    :index="third.id"
                    :key="third.id"
                  >
                    <template #title>{{third.text}}</template>
                  </el-sub-menu>
                  <el-menu-item
                    v-else
                    :index="second.id"
                    :key="second.id"
                  >{{third.text}}</el-menu-item>
                </span>
              </el-sub-menu>
              <el-menu-item
                v-else
                :index="second.id"
                :key="'' + second.id"
              >{{second.text}}</el-menu-item>
            </span>
          </el-sub-menu>
          <el-menu-item
            v-else
            :index="first.id"
            :key="'' + first.id"
            :style="currStyle"
          ><div class="first-menu" :style="currStyle">{{first.text}}</div></el-menu-item>
        </span>
      </el-menu>
    </div>
  </div>
  <div
    v-else
    v-loading="true"
    element-loading-text=""
    style="min-height: 30px;"
  ></div>
</template>

<script setup>
import { ref, onMounted, inject, getCurrentInstance, nextTick, watch, computed } from 'vue';
import visual from "@/visual/js/visual";
import { useRoute, useRouter } from "vue-router";
import { usePortalRouterStore as useRouterStore } from "@/portal/pinia/router";
import EventHandler from "@/visual/js/event";
import api from "@/http/api";
import tool from "@/utils/tool";

const props = defineProps({
  node: Object
});
const initializing = ref(true);
const active = ref('');
const route = useRoute();
const router = useRouter();
const routerStore = useRouterStore();
const currNode = ref(props.node);
const compStyle = ref({});
const currStyle = ref('');
const dataList = ref([]);
new EventHandler(
  inject('eventHandler', Function, true),
  getCurrentInstance(),
  currNode.value
);

const init = async(styleId) => {
  initializing.value = true;
  visual.initStyle(currNode.value, styleId);
  compStyle.value = currNode.value.currCompStyle || {};
  currStyle.value = visual.parseFontStyle(compStyle.value || {});
  dataList.value = routerStore.getMenuTree() || [];

  if (!dataList.value || dataList.value.length === 0) {
    const res = await api.post('/business/menu/portal-tree');
    dataList.value = res.data && res.data.children || [];
  }

  await nextTick(() => initializing.value = false);
};

const style = computed(() => {
  const compStyle = currNode.value.currCompStyle || {};
  let result = visual.parseStyle(compStyle);

  if (compStyle['item-width']) {
    result += "--vc-menu-width: " + compStyle['item-width'] + ";";
    document.documentElement.style.setProperty('--vc-menu-width', compStyle['item-width']);
  }

  if (compStyle['item-height']) {
    result += "--el-menu-item-height: " + compStyle['item-height'] + ";";
    result += "--el-menu-horizontal-height: " + compStyle['item-height'] + ";";
    document.documentElement.style.setProperty('--vc-menu-horizontal-sub-item-height', compStyle['item-height']);
  } else {
    result += "--el-menu-item-height: unset;";
    result += "--el-menu-horizontal-height: unset;";
  }

  if (compStyle['item-split-color']) {
    result += "--vc-menu-split-color: " + compStyle['item-split-color'] + ";";
  }

  if (compStyle['item-background-color']) {
    document.documentElement.style.setProperty('--vc-menu-popper-bg-color', compStyle['item-background-color']);
  }

  if (compStyle['item-font-color']) {
    document.documentElement.style.setProperty('--vc-menu-text-color', compStyle['item-font-color']);
  }

  if (compStyle['item-active-background-color']) {
    document.documentElement.style.setProperty('--vc-menu-hover-bg-color', compStyle['item-active-background-color']);
  }

  if (compStyle['item-active-font-color']) {
    document.documentElement.style.setProperty('--vc-menu-active-color', compStyle['item-active-font-color']);
    document.documentElement.style.setProperty('--vc-menu-hover-text-color', compStyle['item-active-font-color']);
  }

  return result;
});

const selectMenuItem = (index) => {
  if (index === route.name) return;
  if (index.indexOf('http://') >= 0 || index.indexOf('https://') >= 0) {
    window.open(index);
  } else {
    const query = {};
    const node = tool.findNode(index, dataList.value);
    if (node.data?.paramJson) {
      try {
        const paramJson = JSON.parse(node.data?.paramJson);
        (paramJson.paramList || []).forEach(param => {
          if (param.pageParamName) {
            query[param.pageParamName] = param.filterValue || '';
          }
        });
      } catch (e) {
        console.log("参数解释出错：", e)
      }
    }
    router.push({ name: index, query: query });
  }
};

const getData = () => {
  return { };
};

const changeStyle = (styleId) => {
  init(styleId);
};

const refresh = () => {
  init();
};

watch(() => route, () => {
  active.value = route.meta.activeName || route.name;
}, { deep: true });

onMounted(() => {
  active.value = route.meta.activeName || route.name;
  refresh();
});

defineExpose({ getData, changeStyle, refresh });
</script>

<style lang="scss">
.vc-menu-popper {
  --el-menu-bg-color: transparent!important;
  --el-menu-hover-bg-color: var(--vc-menu-hover-bg-color);
  --el-menu-horizontal-sub-item-height: var(--vc-menu-horizontal-sub-item-height);
  --el-menu-text-color: var(--vc-menu-text-color);
  --el-menu-active-color: var(--vc-menu-active-color);
  --el-menu-hover-text-color: var(--vc-menu-hover-text-color);
  background-color: var(--vc-menu-popper-bg-color, white);
  border: none!important;
  border-radius: 0;
  text-align: center;
  .el-menu--popup {
    padding: 0;
    box-shadow: none;
    width: var(--vc-menu-width, unset);
    min-width: unset;
    .el-menu-item {
      width: var(--vc-menu-width, unset);
      justify-content: center;
    }
    .el-menu-item.is-active,
    .el-sub-menu.is-active>.el-sub-menu__title {
      color: var(--vc-menu-text-color)!important;
    }
    .el-menu-item.is-active:hover,
    .el-sub-menu.is-active>.el-sub-menu__title:hover {
      color: var(--vc-menu-active-color)!important;
    }
  }
}
</style>

<style scoped lang="scss">
.vc-portal-menu {
  --el-menu-bg-color: transparent;
  --el-menu-item-height: unset;
  --el-menu-horizontal-height: unset;
  --el-menu-hover-bg-color: var(--vc-menu-hover-bg-color);
  width: 100%;
  :deep(.el-menu) {
    background: transparent !important;
    border-bottom: none !important;
    >span {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    span::after {
      content: " ";
      width: 1px;
      height: 15px;
      background: var(--vc-menu-split-color);
    }
    span:last-child::after {
      display: none;
    }
    >.el-menu-item {
      padding: 0;
    }
    .el-menu-item {
      width: var(--vc-menu-width, unset);
      justify-content: center;
    }
    .el-menu-item:focus {
      background-color: transparent;
    }
    .el-menu-item:hover {
      background-color: var(--el-menu-hover-bg-color);
    }
    .el-sub-menu .el-sub-menu__title:hover {
      background-color: var(--el-menu-hover-bg-color);
    }
    .el-sub-menu__title {
      padding: 0 var(--el-menu-base-level-padding)!important;
      justify-content: center;
    }
    .el-sub-menu {
      width: var(--vc-menu-width, unset);
      justify-content: center;
    }
    .el-menu-item.is-active {
      border-bottom: unset!important;
    }
    .first-menu > div {
      color: inherit;
    }
    .el-sub-menu__icon-arrow {
      display: none !important;
    }
  }
}
</style>